<template>
	<view class="custom-header" :class="bg=='1'?'hasBg':'hasNoBg'">
		{{text}}
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue';
	const props = defineProps({
		bg: Number,
		text: String
	});
</script>

<style lang="less" scoped>
	.custom-header {
		position: fixed;
		top: 0px;
		/* 从顶部开始 */
		left: 0;
		width: 100%;
		font-weight: 500;
		font-size: 34rpx;
		color: #2F2F2F;
		text-align: center;
		padding-top: 50px;
		text-align: center;
		padding-top: 50rpx;
		/* 根据实际情况调整顶部padding以避免电量条   可能会差10px*/
		z-index: 999;
		/* 确保header在最上层 */

	}

	.hasBg {
		height: 392rpx;
		// background-color: linear-gradient(to right, rgba(255, 175, 69, 0.65) , rgba(239, 3, 7, 0.15));
		/* 设置你的header高度 */
		background-image: url('@/static/home/bg.jpeg');
		/* 替换为您的背景图片路径 */
		// background-size: cover;
		/* 根据需要调整背景图片大小 */
		// background-position: center;
		/* 根据需要调整背景图片位置 */
		/* 可能还需要重置其他样式，比如背景色，以确保图片正确显示 */
		// background-color: transparent;
	}



	.hasNoBg {
		height: 50rpx;
		background-image: url('@/static/home/bg.jpeg');
		/* 替换为您的背景图片路径 */
		background-size: cover;
		/* 根据需要调整背景图片大小 */
		background-position: center;
		/* 根据需要调整背景图片位置 */
		/* 可能还需要重置其他样式，比如背景色，以确保图片正确显示 */
		background-color: transparent;
	}
</style>